<template>
	<view class="category-wrap" :data-theme="theme()" :class="theme() || ''">
		<!-- #ifdef APP-PLUS -->
		<header-bar></header-bar>
		<!-- #endif -->


		<!-- 搜索框 -->
		<!-- <view
      class="index-search-box-cate d-b-c"
      id="searchBox"
      :style="
        topBarHeight() == 0
          ? ''
          : 'height:' + topBarHeight() + 'px;padding-top:' + topBarTop() + 'px'
      "
    >
      <view class="index-search-cate flex-1 t-c" @click="gotoSearch">
        <span class="icon iconfont icon-sousuo"></span>
        <text class="ml10">{{ searchName }}</text>
      </view>
      <!-- #ifdef MP-WEIXIN -->
		<!-- <view class="wx-top-right"></view> -->
		<!-- #endif -->
		<!-- </view> -->

		<!-- 搜索 -->

		<view style="height: 124rpx;
	background-color: white;
    display: flex;
    flex-direction: row;align-items: center;">
			<view @click="gotoSearch" style="
		background-color: #F7F7F7;
		height: 72rpx;
		border-radius: 36rpx;    
		margin-left: 20rpx;
		width: 85%;
		display: flex;
		    align-items: center;">

				<text class="icon iconfont icon-sousuo1" style="margin-left: 20rpx;"></text>
				<text style="margin-left: 16rpx;margin-right: 16rpx;color: #E6E6E6;">|</text>
				<text style="margin-left: 20rpx;
			color: #333333;font-size: 28rpx;">搜索你感兴趣的商品</text>

			</view>

			<view @click="gotoSearch" style="color: #FF2442;    
		margin-left: 20rpx;
		font-size: 28rpx;">搜索</view>


		</view>

		<!-- 广告位-->

		<view @click="adClick">
			<image mode="aspectFill" src="/static/jt.jpg" style="
		height: 260rpx;
		margin-left: 3%;
		width: 94%;
		border-radius: 12rpx;"></image>
		</view>

		<!-- 切换 类型 品牌 -->

		<view style="height: 96rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 8rpx;">
			<view style="font-size: 32rpx;
				width: 100rpx;" :style="{color: categoryType == 1 ? '#FF2442' : '#333333'}" @click="typeClick">类型</view>
			<view style="margin-left: 120rpx;
				font-size: 32rpx;
				width: 100rpx;" :style="{color: categoryType == 2 ? '#FF2442' : '#333333'}" @click="brandClick">品牌</view>
		</view>

		<view></view>


		<!--类别列表-->
		<view class="category-content">
			<!--一级分类 大图-->
			<view class="cotegory-type cotegory-type-1" v-if="showType == 10 && style == 3">
				<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
					<view class="list cotegory-padding">
						<view class="item" v-for="(item, index) in listData" :key="index"
							@click="gotoList(item.categoryId)">
							<view class="pic">
								<image :src="hasImages(item)" mode="widthFix"></image>
							</view>
							<view class="p-20-0 tc f28">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!--二级分类-->
			<template v-if="
          (showType == 20 && (style == 1 || style == 2 || style == 3)) ||
          (showType == 10 && (style == 1 || style == 2 || style == 4))
        ">
				<view class="cotegory-type cotegory-type-3">
					<template v-if="showTwo()">
						<view class="category-tab f-s-0">
							<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
								<template v-for="(item, index) in listData" :key="index">
									<view :class="selectIndex == index ? 'item active' : 'item'"
										@click="selectCategory(index)">
										<text>{{ item.name }}</text>
									</view>
								</template>
								<view class="menu-bottom"></view>
							</scroll-view>
						</view>
					</template>

					<view class="category-tab f-s-0" v-if="
              (style == 1 && showType == 20) || (style == 4 && showType == 10)
            ">
						<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
							<view :class="selectIndex == index ? 'item active' : 'item'"
								v-for="(item, index) in listData" :key="index" @click="selectCategory(index)">
								<text>{{ item.name }}</text>
							</view>
							<view class="menu-bottom"></view>
						</scroll-view>
					</view>
					<!--二级分类 小图-->
					<view class="cotegory-type cotegory-type-2 flex-1" v-if="style == 1 && showType == 20">
						<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
							<view class="list cotegory-padding">
								<view class="item" v-for="(item, index) in childlist" :key="index"
									@click="gotoList(item.categoryId)">
									<image :src="hasImages(item)" mode="widthFix"></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>

					<!--一级分类 小图-->
					<view class="cotegory-type cotegory-type-2 flex-1" v-if="style == 1 && showType == 10">
						<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
							<view class="list cotegory-padding">
								<view class="item" v-for="(item, index) in listData" :key="index"
									@click="gotoList(item.categoryId)">
									<image :src="hasImages(item)" mode="widthFix"></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="category-content pr" v-if="style == 2 || style == 3 || style == 4">
						<scroll-view scroll-y="true" class="scroll-Y scroll-3"
							:style="'height:' + scrollviewHigh + 'px;'" @scrolltolower="scrolltolowerFunc">
							<view class="catescroll2-top" v-if="showType == 20 && (style == 2 || style == 3)">
								<view @click="changeCategory(item.categoryId)" class="catescroll2-top-item"
									:class="{ active: item.categoryId == categoryId }"
									v-for="(item, index) in childlist" :key="index">
									{{ item.name }}
								</view>
							</view>
							<view class="cotegory-padding">
								<view class="product-item-2" @click="
                    gotoPage(
                      '/pages/product/detail/detail?productId=' + item.productId
                    )
                  " v-for="(item, index) in productlist" :key="index">
									<image class="product-image-2" :src="item.productImage" mode=""></image>
									<view class="flex-1 d-c d-b-s" style="height: 154rpx">
										<view class="text-ellipsis-2 f28 gray3">{{
                      item.productName
                    }}</view>
										<view class="theme-price f36 fb ww100 price-wrap">
											<text class="f24">￥</text>
											{{ item.productPrice }}
											<template v-if="shoppingPrice && !item.isActivity && isBuyFast()">
												<view class="add-shopping-wrap theme-bg"
													@click.stop="addShopping(item)">
													<view class="icon iconfont icon-icozhuanhuan"></view>
												</view>
											</template>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</template>
		</view>
		<!-- 结算弹窗 -->
		<categoryMaskVue ref="categoryMaskRef" :dataList="productArr" @get-shopping-num="getShoppingNum" />
		<!-- 快速结算 -->
		<template v-if="isBuyFast()">
			<view class="shopping d-b-c customTabBar" id="shopping">
				<view class="shopping-l d-s-c">
					<view class="shopping-circle" @click="lookProduct">
						<view class="shopping-icon icon iconfont icon-gouwuchefill"></view>
						<view class="shopping-num" v-if="shoppingNum && shoppingNum != 0">{{
              shoppingNum
            }}</view>
					</view>
					<view class="shopping-price d-s-c">
						<view class="shopping-symbol">￥</view>
						<view>{{ shoppingPrice }}</view>
					</view>
				</view>
				<button class="shopping-r" @click="Submit">去结算</button>
			</view>
		</template>
		<!-- #ifdef H5 -->
		<view id="footBottom" v-if="isDomHeight"></view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view id="footBottom" v-if="isDomHeight && osName != 'android'"></view>
		<!-- #endif -->
		<tabBar :isScroll="true"></tabBar>
		<!--购物确定-->
		<spec :isCategory="true" :isPopup="isPopup" :productModel="productModel" @close="closePopup"></spec>
	</view>
</template>

<script>
	import spec from "@/pages/product/detail/popup/spec.vue";
	import categoryMaskVue from "./categoryMask.vue";
	import throttle from "@/common/throttle.js";
	export default {
		components: {
			spec,
			categoryMaskVue,
		},
		data() {
			return {
				loading: true,
				searchName: "搜索商品",
				/*展示方式*/
				showType: 3,
				style: 1,
				/*手机高度*/
				phoneHeight: 0,
				/*可滚动视图区域高度*/
				scrollviewHigh: 0,
				/*数据*/
				listData: [],
				/*子类数据*/
				childlist: [],
				/*当前选中的分类*/
				selectIndex: 0,
				catename: "全部商品",
				productlist: [],
				pageIndex: 1,
				categoryId: 0,
				tableData: [],
				isLogin: false,
				shoppingNum: 0,
				shoppingPrice: null,
				productModel: {},
				isPopup: false,
				specData: null,
				detail: null,
				isDomHeight: true,
				shoppingHeight: 0,
				searchHeight: 0,
				footerHeight: 0,
				productArr: [],
				isAuto: 0,
				platFormType: "",
				url: "",
				osName: "",
				categoryType: 1
			};

		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad() {
			const platFormType = uni.getSystemInfoSync().uniPlatform;
			let osName = "";
			uni.getSystemInfo({
				success: function(res) {
					osName = res.osName;
				},
			});
			this.osName = osName;
			this.platFormType = platFormType;
			//#ifdef H5
			if (this.isWeixin()) {
				this.url = window.location.href;
			}
			//#endif
		},
		mounted() {
			this.init();
		},
		onShow() {
			// this.shoppingNum = 0;
			// this.shoppingPrice = "0.00";
			// this.getShoppingNum();
			// let tabBarObj = uni.getStorageSync("TabBar");
			// if (tabBarObj) {
			//   this.isAuto = tabBarObj.isAuto;
			// }
			// this.getTabBarLinks();
			this.productlist = [];
			this.no_more = false;
			this.pageIndex = 1;
			this.selectIndex = 0;
			this.getData();
		},

		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.productlist.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			},
		},
		/**
		 * 设置分享内容
		 */
		onShareAppMessage() {
			let self = this;
			return {
				title: self.templet.shareTitle,
				path: "/pages/product/category?" + self.getShareUrlParams(),
			};
		},
		methods: {

			// 广告位
			adClick() {

			},

			// 类型
			typeClick() {
				this.categoryType = 1
				this.getData()
			},

			// 品牌
			brandClick() {
				this.categoryType = 2
				this.getBrand()
			},

			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				console.log(1);
				if (self.no_more) {
					return;
				}
				console.log(2);
				self.pageIndex++;
				if (self.pageIndex <= self.lastPage) {
					self.getProduct();
				} else {
					self.no_more = true;
				}
			},
			lookProduct() {
				this.$refs.categoryMaskRef.open();
			},
			isBuyFast() {
				if (this.isLogin) {
					if (
						(this.isLogin && this.showType == 10 && this.style == 4) ||
						(this.showType == 20 && this.style == 3)
					) {
						let height =
							this.phoneHeight - this.searchHeight - this.shoppingHeight;
						// #ifdef H5
						this.scrollviewHigh = height;
						// #endif
						// #ifndef H5
						this.scrollviewHigh = height - this.footerHeight;
						// #endif
						return true;
					}
				}
				// #ifdef H5
				this.scrollviewHigh = this.phoneHeight - this.searchHeight;
				// #endif
				// #ifndef H5
				this.scrollviewHigh =
					this.phoneHeight - this.searchHeight - this.footerHeight;
				// #endif
				return false;
			},
			showTwo() {
				if (this.showType == 20 && (this.style == 2 || this.style == 3)) {
					return true;
				}
				if (this.showType == 10 && this.style == 2) {
					return true;
				}
				return false;
			},
			/*初始化*/
			init() {
				let self = this;
				uni.getSystemInfo({
					success(res) {
						self.phoneHeight = res.windowHeight;
						// 计算组件的高度
						let view = uni.createSelectorQuery().select("#searchBox");
						view
							.boundingClientRect((data) => {
								self.searchHeight = data.height || 0;
							})
							.exec();
						let footBottomView = uni.createSelectorQuery().select("#footBottom");
						if (footBottomView) {
							footBottomView
								.boundingClientRect((data) => {
									if (data && data.height) {
										self.footerHeight = data.height;
									}
								})
								.exec();
						}
						self.isDomHeight = false;
					},
				});
			},
			/*判断是否有图片*/
			hasImages(e) {
				if (e && e.imagePath != null) {
					return e.imagePath;
				} else {
					return "";
				}
			},

			/*获取数据*/
			getData() {
				let self = this;
				self.loading = true;
				self._get("product/category/index", {}, function(res) {
					self.listData = res.data.list;
					self.catename = self.listData[0].name;
					self.showType = res.data.template.categoryStyle;
					self.style = res.data.template.windStyle;
					if (self.listData && self.listData.length > 0) {
						if (self.listData[0].children && self.showType == 20) {
							self.categoryId = self.listData[0].children[0].categoryId;
							self.childlist = self.listData[0].children;
						} else {
							self.categoryId = self.listData[0].categoryId;
						}
					}
					if (self.style == 2) {
						self.getProduct();
					} else if (
						(self.showType == 10 && self.style == 4) ||
						(self.showType == 20 && self.style == 3)
					) {
						self.getProduct();
						self.getShoppingNum();
					}
					// if (self.listData[0].children) {
					//   self.childlist = self.listData[0].children;
					//   self.changeCategory(self.childlist[0].categoryId);
					// }
					self.background = res.data.background;
					// self.$nextTick(() => {
					//   self.isBuyFast();
					// });
					self.loading = false;
				});
			},

			// 品牌
			getBrand() {
				let self = this;
				self.loading = true;
				self._get("product/brand/index", {}, function(res) {
					self.listData = res.data.list;
					self.catename = self.listData[0].name;
					self.showType = res.data.template.categoryStyle;
					self.style = res.data.template.windStyle;
					if (self.listData && self.listData.length > 0) {
						if (self.listData[0].children && self.showType == 20) {
							self.categoryId = self.listData[0].children[0].categoryId;
							self.childlist = self.listData[0].children;
						} else {
							self.categoryId = self.listData[0].categoryId;
						}
					}
					if (self.style == 2) {
						self.getProduct();
					} else if (
						(self.showType == 10 && self.style == 4) ||
						(self.showType == 20 && self.style == 3)
					) {
						self.getProduct();
						self.getShoppingNum();
					}
					// if (self.listData[0].children) {
					//   self.childlist = self.listData[0].children;
					//   self.changeCategory(self.childlist[0].categoryId);
					// }
					self.background = res.data.background;
					// self.$nextTick(() => {
					//   self.isBuyFast();
					// });
					self.loading = false;
				});
			},

			changeCategory(e) {
				if (this.loading == true) {
					return;
				}
				this.categoryId = e;
				this.productlist = [];
				this.no_more = false;
				this.pageIndex = 1;
				this.getProduct();
			},
			/*去结算*/
			Submit() {
				let self = this;
				let arrIds = [];
				self.tableData.forEach((item) => {
					item.productList.forEach((product) => {
						arrIds.push(`${product.productId}_${product.specSkuId}`);
					});
				});
				if (arrIds.length == 0) {
					uni.showToast({
						title: "请选择商品",
						icon: "none",
					});
					return false;
				}
				self.gotoPage(
					"/pages/order/confirm-order?orderType=cart&cartIds=" + arrIds
				);
				// let arrIds = this.getCheckedIds();
				// if (arrIds.length == 0) {
				//   uni.showToast({
				//     title: "请选择商品",
				//     icon: "none",
				//   });
				//   return false;
				// }
				// self.gotoPage(
				//   "/pages/order/confirm-order?orderType=cart&cartIds=" + arrIds
				// );
			},
			/* 获取购物车数量 */
			getShoppingNum() {
				let self = this;
				self._post(
					"order/cart/cart", {},
					function(res) {
						const {
							data: {
								productList
							},
						} = res;
						self.isLogin = false;
						if (productList) {
							self.isLogin = true;
							self.tableData = productList;
							let totalNum = 0;
							let totalPrice = 0;
							let productArr = [];
							if (productList && productList.length > 0) {
								productList.forEach((v) => {
									if (v.productList && v.productList.length > 0) {
										v.productList.forEach((item) => {
											productArr.push(item);
											totalNum = totalNum + item.totalNum;
											totalPrice =
												totalPrice +
												parseFloat(item.totalNum) * parseFloat(item
													.productPrice);
										});
									}
								});
							}
							self.productArr = productArr;
							self.shoppingNum = totalNum;
							self.shoppingPrice = totalPrice.toFixed(2);
						}
					},
					(err) => {
						// self.getShoppingNum();
						self.productlist = [];
						self.no_more = false;
						self.pageIndex = 1;
						self.getData();
					}
				);
			},
			/* 添加购物车初始化 */
			addShopping(item) {
				if (item.isVirtual == 1) {
					uni.showToast({
						title: "虚拟商品不能加入购物车",
						icon: "none",
					});
					return;
				} else if (item.specType == 20) {
					console.log("---------------");
					this.getSpecData(item.productId);
				} else {
					this.addSingleSpec(item.productId);
				}
			},
			/* 单规格商品加入购物车 */
			addSingleSpec(productId) {
				let self = this;
				self._post(
					"order/cart/add", {
						productId: productId,
						totalNum: 1,
						specSkuId: 0,
					},
					function(res) {
						self.getShoppingNum();
					}
				);
			},
			/* 获取多规格商品 */
			getSpecData(productId) {
				let self = this;
				self._get(
					"product/product/detail", {
						productId: productId,
					},
					function(res) {
						if (res.data.specData) {
							self.isPopup = false;
							self.detail = res.data.detail;
							self.specData = res.data.specData;
							self.initSpecData(res.data.specData);
						} else {
							uni.showToast({
								title: "暂无规格，请于后台添加!",
								mask: false,
								duration: 1500,
								icon: "none",
							});
						}
					}
				);
			},
			/* 初始化规格弹窗 */
			initMaskPopup() {
				let obj = {
					specData: this.specData,
					detail: this.detail,
					productSpecArr: this.specData != null ? new Array(this.specData.specAttr.length) : [],
					showSku: {
						skuImage: "",
						price: 0,
						productSkuId: 0,
						linePrice: 0,
						stock: 0,
						sum: 1,
					},
					plusSku: null,
					type: "card",
					plusName: "",
				};
				this.productModel = obj;
				this.isPopup = true;
			},
			/*初始化多规格商品*/
			initSpecData(data) {
				for (let i in data.specAttr) {
					for (let j in data.specAttr[i].specItems) {
						data.specAttr[i].specItems[j].checked = false;
					}
				}
				this.specData = data;
				this.initMaskPopup();
			},
			closePopup() {
				this.isPopup = false;
				this.getShoppingNum();
			},
			getProduct() {
				uni.showLoading({
					title: "加载中",
				});
				let self = this;
				let page = self.pageIndex;
				let categoryId = self.categoryId;
				let sortType = self.sortType;
				let sortPrice = self.sortPrice;
				self.loading = true;
				self._postBody(
					"product/product/lists", {
						pageIndex: page || 1,
						categoryId,
						search: "",
						sortType: "",
						sortPrice: "",
						pageSize: 10,
					},
					function(res) {
						setTimeout(() => {
							uni.hideLoading();
							self.loading = false;
						}, 500);

						self.productlist = self.productlist.concat(res.data.records);
						self.lastPage = res.data.lastPage;
						if (res.data.lastPage <= 1) {
							self.no_more = true;
						}
					}
				);
			},
			/*选择分类*/
			selectCategory(e) {
				if (this.loading == true) {
					return;
				}
				throttle(() => {
					if (this.showType == 10) {
						this.selectIndex = e;
						this.catename = this.listData[this.selectIndex].name;
						this.changeCategory(this.listData[this.selectIndex].categoryId);
					} else {
						if (this.listData[e].children) {
							this.childlist = this.listData[e].children;
							this.selectIndex = e;
							this.catename = this.listData[this.selectIndex].name;
							this.changeCategory(this.childlist[0].categoryId);
						} else {
							this.selectIndex = e;
							this.childlist = [];
							this.catename = this.listData[this.selectIndex].name;
							this.changeCategory(this.listData[this.selectIndex].categoryId);
						}
					}
				}, 1000);
			},
			hasSelect() {
				let self = this;
			},
			/*跳转产品列表*/
			gotoList(e) {
				let categoryId = e;
				let sortType = "all";
				let search = "";
				let sortPrice = 0;
				this.gotoPage(
					"/pages/product/list/list?categoryId=" +
					categoryId +
					"&sortType=" +
					sortType +
					"&search=" +
					search +
					"&sortPrice=" +
					sortPrice
				);
			},

			wxGetUserInfo: function(res) {
				if (!res.detail.iv) {
					uni.showToast({
						title: "您取消了授权,登录失败",
						icon: "none",
					});
					return false;
				}
			},

			/*跳转搜索页面*/
			gotoSearch() {
				this.gotoPage("/pages/product/search/search");
			},
		},
	};
</script>

<style lang="scss">
	@import "@/common/mixin.scss";
	$footer-tabBar-height: 50px;
	$shopping-height: 96rpx;

	page {
		min-height: 0;
	}

	.foot_ {
		height: $footer-tabBar-height;
		width: 100%;
	}

	.menu-bottom {
		width: 100%;
		height: 250rpx;
	}

	.cotegory-padding {
		padding-bottom: calc($footer-tabBar-height + $shopping-height);
		box-sizing: border-box;
	}

	.cotegory-type {
		line-height: 40rpx;
		background: #ffffff;
	}

	.cotegory-type image {
		width: 100%;
	}

	.cotegory-type-1 .list {
		padding: 20rpx;
	}

	.cotegory-type-1 .list.cotegory-padding {
		padding-bottom: calc($footer-tabBar-height + $shopping-height);
		box-sizing: border-box;
	}

	.cotegory-type-1 .list .item {
		margin-top: 30rpx;
	}

	.cotegory-type-1 .list .item .pic {
		// border: 1px solid #e3e3e3;
		width: 710rpx;
		height: auto;
		overflow: hidden;
		border-radius: 8px;
	}

	.cotegory-type-1 .list .item image {
		width: 100%;
		height: 100%;
	}

	.cotegory-type-2 .list,
	.cotegory-type-3 .list {
		padding: 0 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.cotegory-type-2 .list .item,
	.cotegory-type-3 .list .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.cotegory-type-3 .list .item {
		width: 140rpx;
		height: 200rpx;
		margin-top: 40rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
	}

	.cotegory-type-2 .list .item {
		padding: 0 16rpx;
		width: 33.3%;
		margin: 0;
		margin-bottom: 16rpx;
		height: 300rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.cotegory-type-2 .list .item image {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.cotegory-type-3 {
		display: flex;
	}

	.cotegory-type-3 .category-tab {
		width: 200rpx;
		background: #ffffff;
		@include background_color("opacify_background_0");
		// border-right: 1px solid #e3e3e3;
	}

	.showShopping {
		padding-bottom: $shopping-height;
		box-sizing: border-box;
	}

	.cotegory-type-3 .category-tab .item {
		padding: 40rpx 0;
		font-size: 26rpx;
		text-align: center;
		color: #666666;
		font-weight: bold;
	}

	.cotegory-type-3 .category-tab .item.active {
		position: relative;
		background: #ffffff;

		color: #333333;
	}

	.cotegory-type-3 .category-tab .item.active::after {
		position: absolute;
		content: "";
		top: 40rpx;
		bottom: 40rpx;
		left: 0;
		width: 6rpx;
		height: 22rpx;
		margin: auto;
		@include background_linear("titleft1", "titleft2", 180deg, 0%, 100%);
	}

	.cotegory-type-3 .category-content {
		flex: 1;
		// padding: 0 20rpx;
	}

	.cotegory-type-3 .list .item:nth-child(3n) {
		margin-right: 0;
	}

	.cotegory-type-3 .list .item image {
		width: 140rpx;
		height: 140rpx;
	}

	.cotegory-type-3 .list .item .type-name {
		display: block;
		margin-top: 20rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-overflow: ellipsis;
		width: 100%;
		color: #818181;
		font-size: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-align: center;
	}

	.scroll-3 {
		position: absolute;
		background: #ffffff;
		border-radius: 12px;
	}

	.catename {
		padding-top: 10rpx;
		line-height: 60rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.catescroll2-top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 20rpx 0;
		padding-left: 20rpx;
	}

	.catescroll2-top-item {
		// min-width: 142rpx;
		padding: 0 23rpx;
		height: 58rpx;
		background: #f6f6f6;
		border: 1rpx solid #f6f6f6;
		border-radius: 29rpx;
		margin-right: 14rpx;
		line-height: 58rpx;
		color: #666;
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.catescroll2-top-item.active {
		color: #fff;
		@include background_color("background_color");
		border: 1rpx solid #ee252a;
		@include border_color("border_color");
	}

	.product-item-2:first-child {
		margin-top: 20rpx;
	}

	.product-item-2 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 20rpx;
		margin-bottom: 25rpx;

		.product-image-2 {
			width: 194rpx;
			height: 194rpx;
			display: block;
			margin-right: 20rpx;
		}
	}

	.uni-scroll-view::-webkit-scrollbar,
	.catescroll2-top::-webkit-scrollbar {
		/*滚动条整体样式*/
		/*高宽分别对应横竖滚动条的尺寸*/
		display: block;
		width: 0rpx !important;
		height: 0rpx !important;
		-webkit-appearance: default-button;
	}

	.uni-scroll-view::-webkit-scrollbar-thumb,
	.catescroll2-top::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		background-color: #909399;
	}

	.uni-scroll-view::-webkit-scrollbar-track,
	.catescroll2-top::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #ededed;
		border-radius: 10px;
	}

	.price-wrap {
		position: relative;
		width: 100%;
	}

	.add-shopping-wrap {
		position: absolute;
		right: 0;
		top: 0;
		width: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 50%;

		.icon {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
		}
	}

	#emptyShopping {
		width: 100%;
		height: $shopping-height;
		opacity: 0;
	}

	#footBottom {
		width: 100%;
		// height: $footer-tabBar-height;
		height: $footer-tabBar-height;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.shopping {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: $shopping-height;
		background: #ffffff;
		border-top: 1px solid #eeeeee;
		padding: 0 34rpx;
		box-sizing: border-box;

		&.H5 {
			bottom: var(--window-bottom, 0);
		}

		&.customTabBar {
			bottom: calc(env(safe-area-inset-bottom) + $footer-tabBar-height);
		}

		/* &.noH5:not(.customTabBar){
		bottom: 0;
	} */
		.shopping-l {
			.shopping-circle {
				width: 70rpx;
				height: 69rpx;
				line-height: 69rpx;
				background: #fff;
				border-radius: 50%;
				box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.4);
				position: relative;
			}

			.shopping-icon {
				@include font_color("font_color");
				font-size: 45rpx !important;
				text-align: center;
				margin-top: 3rpx;
			}

			.shopping-num {
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				@include background_color("background_color");
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
				font-size: 23rpx;
				color: #fff;
			}

			.shopping-price {
				@include font_color("font_color");
				font-size: 36rpx;
				margin-left: 42rpx;
				font-weight: bold;

				.shopping-symbol {
					font-size: 22rpx;
				}
			}
		}

		.shopping-r {
			width: 178rpx;
			height: 62rpx;
			line-height: 62rpx;
			@include background_color("background_color");
			border-radius: 31rpx;
			color: #ffffff;
			font-size: 30rpx;
		}
	}
</style>